<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Shopping list example</title>
    <style>
      li {
        margin-bottom: 10px;
      }

      li button {
        font-size: 8px;
        margin-left: 20px;
        color: #666;
      }
	   .cont p{
		  display: inline;
	  }
    </style>
  </head>
  <body>

    <h1>My shopping list</h1>
	<form id="form" target="nm_iframe">
    <div>
      <label for="item">Enter a new item:</label>
      <input type="text" name="item" id="item">
      <button onclick="addItem()">Add item</button>
    </div>
 
    <ul id="ulList">
      <!-- <li><span>12312</span><button onclick="deleteTheDom(this)">Delete</button></li> -->
    </ul> 
	<div class="cont">
      <span>购物车内的商品有：</span>
      <p id="cotent"></p>
      <button  onclick="removeAll()">清空</button>
    </div>
	<iframe id="id_iframe" name="nm_iframe" style="display:none;"></iframe>
  </form>

    <script>
           /**
      要求：
      1、点击additem 将输入框中的文字放置列表中，并将输入框清空
      2、不允许输入空值 ，空值提示
      3、列表中的行点击delete按钮可实现删除该行
      4、刷新页面将输入框清空
      5、实现方式必须为第10章内容，dom节点可以随意添加属性
      6、截至下周二前
      新增需求
      1、输入框过滤前后空字符串
      2、记录输入框输过的文字，在  <p id="cotent"></p> 标签中显示，按 ',' 号分割
      3、点击清空按钮清空列表，并清空 <p id="cotent"></p> 标签
      4、点击列表中的删除按钮，请将<p id="cotent"></p> 标签中对应的文字也一并删除掉
      5、列表中的文字不允许重复 （若重复则什么也不做，然后清空输入框）
      6、增加一键批量功能： 输入框中的文字 当出现 '#' 符号，列表中增加分割后的文字（也要过滤重复的情况）
      7、html页面有所改动，外层增加了form标签，不要随意删除
      8、实现方式必须为前10章内容，dom节点可以随意添加属性
      6、截至本周日下午下班前
      **/
	
      function addItem(){
	  
	   var test = document.getElementById("item").value;
	   var obj_lis = document.getElementById("ulList").getElementsByTagName("li");
	 
		var testArr = new Array(); //定义一数组
		testArr=test.split("#"); //字符分割
		//批量保存
		if(testArr.length > 1){
			for(var j = 0; j < testArr.length ; j ++){
				var name = testArr[j];
				var str_1 = trim(name);
				if(str_1 != '' ){
					addBatch(str_1,obj_lis);
				}
			}
		}else{
			//单笔增加
			var str_1 = trim(test);
		    if(str_1 == '' ||str_1 == null){
			 alert("不能为空");
			 return ;
		    }
		    //alert(str_1);
			addBatch(str_1,obj_lis);
			
		}
	   
		//清空输入框
		document.getElementById("item").value="";

      }
	  
	  
	  //
	  function addBatch(str_1,obj_lis){
			var flag = false;
		
			for(i=0;i<obj_lis.length;i++){
				//判断li 中是否已存在相同的值
				if(obj_lis[i].childNodes[0].childNodes[0].nodeValue == str_1){
					 flag = true;
					 break;
				}
		
			}
			//判断输入的值如果不存在则增加
			if(!flag){
					var ul = document.getElementById("ulList");
					var li = document.createElement("li");
					var span = document.createElement("span");
					var button = document.createElement("button");
					button.onclick = function () {                          //绑定点击事件
						 deleteTheDom(this.parentNode);
						 //document.body.childNodes[5].removeChild(li);
					 };
					button.appendChild(document.createTextNode("Delete"));
					span.appendChild(document.createTextNode(str_1));
					
					
					
					li.appendChild(span);
					li.appendChild(button);
					
					//var liStr = "<span>"+str_1+"<\/span><button onclick=\"deleteTheDom(this.parentNode)\">Delete</button>";
					//li.innerHTML= liStr;
					ul.appendChild(li);
					
					var cotent = document.getElementById("cotent").innerText;
					
					if(cotent != ""){
						document.getElementById("cotent").innerHTML=cotent+","+str_1;
					}else{
						document.getElementById("cotent").innerHTML=str_1;
					}
					
			
			}
			flag = false;
		
	  }
      function deleteTheDom(_ob){
        //_ob指向当前节点
		document.getElementById("ulList").removeChild(_ob);
		var ss = document.getElementById("cotent").innerHTML;
		
		
		var strs= new Array(); //数组
		strs=ss.split(","); //字符分割
		if(strs.length >0){
			document.getElementById("cotent").innerHTML="";
			for(var i = 0 ; i < strs.length; i ++){
				 var name = strs[i];
				 
				 if(name != _ob.childNodes[0].childNodes[0].nodeValue){
					var cotent = document.getElementById("cotent").innerText;
					if(cotent == ""){
						
						document.getElementById("cotent").innerHTML=name;
					}else{
						
						document.getElementById("cotent").innerHTML=cotent+","+name;
					}
					
				}
			}
		}
      }
	  
	  
	   function removeAll(){
		  // document.getElementById("ulList").remove();
		   document.getElementById("ulList").innerHTML="";
		   document.getElementById("cotent").innerHTML="";
      }

	  
	  
	   function trim(str){ //删除左右两端的空格
　　     return str.replace(/(^\s*)|(\s*$)/g, "");
　　 }
    </script>
  </body>
</html>